<script setup lang="ts">
import localeStore from '@/store/locale'
import { storeToRefs } from 'pinia'
const { localeInfo} = storeToRefs(localeStore())
</script>

<template>
  <div class="supports">
     <div class="img_txt">
      <img class="maxwidth_img" src="@/assets/img/animal/47-1.jpg" alt="">
     </div>
     <p class="title">{{localeInfo.supports.title}}</p>
      <div class="content">
        <div class="bock_item">
          <p v-for="(item,index) in localeInfo.supports.desc"  :key="index">{{item}}</p>
        </div>
      </div>
      <div class="email">
        <p class="mess">{{localeInfo.supports.mess}}</p>
        <div class="email_content">
          <div class="email_content_item">
             <img class="maxwidth_img" src="@/assets/img/email/email_1.png" alt="">
             <div>
              <p  v-for="(item,index) in localeInfo.supports.emailDesc" :key="index">{{item}}</p>
             </div>
          </div>
          <div class="email_content_item">
             <img class="maxwidth_img" src="@/assets/img/email/email_2.png" alt="">
             <div>
              <p  v-for="(item,index) in localeInfo.supports.emailDesc1" :key="index">{{item}}</p>
             </div>
          </div>
        </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.supports{
  
  .img_txt{
    position: relative;
    img{
      // width: 100%;
      // height: 100%;
       width: 90%;
      display: block;
      margin-left: 5%;
    }
    
    p{
      position: absolute;
      bottom: 5PX;
      right: 0;
      padding:2px 4px;
      background-color: rgba(203,204,203,0.5);
      span{
        display: block;
         font-weight: bolder;
         font-weight: 10PX;
         color: #FFF;
        &:nth-child(1) {
          margin-bottom: 25PX;
          font-size: 30PX;
          line-height: 30PX;
        }
      }
    }
  }
  .title{
    // font-size: 14PX;
    // font-weight: bold;
    // color: rgba(190,7,8,1);
    // padding-left: 5PX;
      padding: 5px 0 0 10px;
      font-size: 30PX;
      font-weight: bold;
      color: rgb(197,69,69);
      line-height: 20px;
  }
  .content{
    padding-bottom: 20px;
    .bock_item{
      // margin-top: 10px;
      background-color: rgba(242,242,242,0.5);
      padding: 10px 0 10px 10px;
      font-size: 13PX;
      p{
        font-size: 13PX;
        line-height: 20PX;
        color: #666;
        z-index: 5;
      }
     
    }
  }
  .email{
    padding-bottom: 20px;
    .mess{
      font-size: 10px;
      font-weight: bolder;
      text-align: center;
      line-height: 20PX;
      margin-bottom: 15px;
    }
  }
  .email_content{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    .email_content_item{
      width: 50%;
      display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
      img{
        width: 60px;
        margin-bottom: 10PX;
      }
      p{
        font-size: 5px;
        color: #666;
      }
      p:nth-of-type(1){
        font-size: 7px;
        line-height: 20PX;
        color: #333;
        z-index: 5;
        line-height: 14px;
      }
    }
  }
 .btn{
      background-color: rgba(242,242,242,0.5);
      padding: 25px 0 15px 0;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 5PX;
      p{
        &:nth-child(1){
          color: #333;
          font-size: 13PX;
          margin-bottom: 15px;
        }
        &:nth-child(2) {
          span{
            background-color: rgba(252,13,27,1);
            text-align: center;
            padding: 8PX 20PX;
            font-size: 8PX;
            color: #FFF;
            border-radius: 4PX;
          }
        }
      }
    }
}
</style>
